<template>
	<view>
		<w-navbar type="normal" background="linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%)">
			<view slot="navbar-center">评分</view>
		</w-navbar>
		<pageDemoBlock title="基本用法(支持手势滑动)" color="#1c87e4">
			<view class="demo-row">
				<w-rate v-model="number"></w-rate>
				<text class="text">{{number}}星</text>
			</view>
		</pageDemoBlock>
		<pageDemoBlock title="禁用" color="#0553e4">
			<view class="m-b-2">
				<w-rate v-model="disablednumber" defaultColor="#c8c9cc" activeColor="rgb(255, 210, 30)" disabled>
				</w-rate>
			</view>
		</pageDemoBlock>
		<pageDemoBlock title="自定义/颜色/图标/大小" color="#e40000">
			<view class="m-b-2">
				<w-rate v-model="number" defaultColor="#c8c9cc" activeColor="#ee0a24" icon="icon-aixin"></w-rate>
			</view>
			<view class="m-b-2">
				<w-rate v-model="number" :count="8" defaultColor="#a8a9ab" activeColor="#066fee" icon="icon-ww">
				</w-rate>
			</view>
		</pageDemoBlock>

		<pageDemoBlock title="应用场景" color="#62e40a">
			<view class="m-b-2">
				<view class="demo-row">
					<w-rate v-model="number1" defaultColor="#c8c9cc" :activeColor="color1"></w-rate>
					<text class="text">{{text1}}</text>
				</view>
				<view class="demo-row">
					<w-rate v-model="number2" defaultColor="#c8c9cc" :activeColor="color2"></w-rate>
					<text class="text">{{text2}}</text>
				</view>
				<view class="demo-row">
					<w-rate v-model="number3" defaultColor="#c8c9cc" :activeColor="color3"></w-rate>
					<text class="text">{{text3}}</text>
				</view>
			</view>
		</pageDemoBlock>
		
	</view>
</template>

<script>
	import pageDemoBlock from '@/components/page-demo-block'
	export default {
		components: {
			pageDemoBlock
		},
		data() {
			return {
				disablednumber: 2,
				number: 2,
				number1: 1,
				number2: 1,
				number3: 1,
				text1: '',
				text2: '',
				text3: '',
				color1: '',
				color2: '',
				color3: '',
			};
		},
		watch: {
			number1: {
				handler(val) {
					this.text1 = this.textChange(val)
					this.color1 = this.colorChange(val)
				},
				immediate: true
			},
			number2: {
				handler(val) {
					this.text2 = this.textChange(val)
					this.color2 = this.colorChange(val)
				},
				immediate: true
			},
			number3: {
				handler(val) {
					this.text3 = this.textChange(val)
					this.color3 = this.colorChange(val)
				},
				immediate: true
			}
		},
		
		methods: {
			textChange(num) {
				switch (num) {
					case 0:
						return '差到极致'
					case 1:
						return '非常差'
					case 2:
						return '差'
					case 3:
						return '一般'
					case 4:
						return '满意'
					case 5:
						return '非常满意'
				}
			},
			colorChange(num) {
				switch (num) {
					case 0:
						return 'transparent'
					case 1:
						return '#f0bebb'
					case 2:
						return '#f79990'
					case 3:
						return '#ff7777'
					case 4:
						return '#ff6246'
					case 5:
						return '#ff0000'
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.demo-row {
		display: flex;
		align-items: center;

		.text {
			margin-left: 20rpx;
			color: #686868;
		}
	}
</style>
